<script setup lang='ts'>
import { } from "vue"
defineProps({
    book: {
        type: Object,
    }
})
</script>

<template>
    <div class="book" v-if="book">
        <img v-lazy="book.cover" alt="">
        <h3>{{ book.title }}</h3>
        <span>{{ book.author }}</span>
    </div>
</template>

<style lang="less" scoped>
.book {
    width: 75rem;
    // height: 100rem;
    margin-bottom: 10rem;

    img {
        width: 100%;
        height: 100rem;
        font-size: 0;
        box-shadow: 0 0 5rem 1rem #ccc;
    }

    h3 {
        color: #000;
        font-weight: 400;
        font-size: 15rem;
        margin: 4rem 0;
        display: -webkit-box;
        -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
        text-overflow: ellipsis; //溢出用省略号显示
        overflow: hidden; //超出的文本隐藏
        -webkit-line-clamp: 2; //表明3行文本显示省略号,这里要根据自身需求进行设置
    }

    span {
        font-size: 12rem;
        color: #666;

        display: -webkit-box;
        -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
        text-overflow: ellipsis; //溢出用省略号显示
        overflow: hidden; //超出的文本隐藏
        -webkit-line-clamp: 1;
    }

}
</style>
